<template>
	<div class="footer_f">
		<div class="footer" :style="kongFlg?kongStyle:{}">
			<div :class="activeStr=='index'?'footer_active':''" class="footer_home" @click="goNext('index')">
				<img :src="homeImg" alt="" />
				<span>首页</span>
			</div>
			<div :class="activeStr=='study'?'footer_active':''" class="footer_home" @click="goNext('study')">
				<img :src="homeStudy" alt="" />
				<span>学习</span>
			</div>
			<div :class="activeStr=='tool'?'footer_active':''" class="footer_home" @click="goNext('tool')">
				<img :src="homeTool" alt="" />
				<span>工具</span>
			</div>
			<div :class="activeStr=='my'?'footer_active':''"  class="footer_my" @click="goNext('my')">
				<img :src="myImg" alt="" />
				<span>我的</span>
			</div>
		</div>
		<div v-if="kongFlg" class="kong"></div>
	</div>
</template>

<script>
	import home from '../../assets/home.png'
	import homeRed from '../../assets/homeRed1.png'
	import my from '../../assets/my.png'
	import myRed from '../../assets/myRed.png'
//	import homeStudy from '../../assets/homeStudy.png'
	import homeStudy from '../../assets/homeStudy.png'
	import homeStudy_1 from '../../assets/homeStudy_1.png'
	import homeTool from '../../assets/homeTool.png'
	import homeToolRed from '../../assets/homeToolRed.png'
	
	export default{
		name:'Footer',
		components:{
			
		},
		props: {
			activeStr: {
				default: 'index',
			},
			kongFlg:{
				default:false,
			}
		},
		data(){
			return {
				homeImg:home,
				myImg:my,
				homeTool:homeTool,
				homeStudy:homeStudy,
				kongStyle:{
					margin: "auto",
					position: "fixed",
					bottom: 0,
					left: 0,
					right: 0,
				},
			}
		},
		created() {
		},
		watch: {
			
		},
		computed: {
			
		},
		mounted(){
			if(this.activeStr=='index'){
				this.homeImg=homeRed
			}else if(this.activeStr=='my'){
				this.myImg=myRed
			}else if(this.activeStr=='study'){
				this.homeStudy=homeStudy_1
			}else if(this.activeStr=='tool'){
				this.homeTool=homeToolRed
			}
		},
		methods:{
			goNext(name){
				let o={
					name:name
				}
				if(name=='index'){
					o={
						name:name,
						query:{
							str:'index'
						}
					}
					this.homeImg=homeRed
				}else if(name=='my'){
					this.myImg=myRed
				}
				
				this.$router.push(o)
			}
		}
	}
</script>

<style lang="scss">
	@import './Footer.scss';
</style>